/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Element Toggler

<br/>
This represents current best practices around using the `.element-toggler` class.

<br/>

  - The current thinking on accessibility is that we should use a `<span>` for the 
  element-toggler dom element so that it's not read as "link" like it would if we used an &lt;&gt; tag.  
  - Use `aria-controls` and `aria-expanded` on the dom element that has class `element_toggler`.  
  - Also include an aria-label, of the format: `[toggler-name] toggle [toggled-content-description] visibility`.  

<br/>

```html

<span
  class="element_toggler"
  aria-controls="group_1"
  aria-expanded="true"
  aria-label="Toggler toggle list visibility"
  role="button"
>
  <i class="icon-mini-arrow-down"></i> Toggler
</span>
<ul id="group_1">
  <li>item 1</li>
  <li>item 2</li>
</ul>

```

See `app/coffeescripts/behaviors/elementToggler.coffee`for implementation

*/

.element_toggler {
  @include ic-focus-base;
  cursor: pointer;
  &:focus { @include ic-focus-variant; }
}
